import React, { useEffect, useState } from 'react'
/* 
useEffect:
    - Effect Hook 可以让你在函数组件中执行副作用操作
    - Effect可以告诉 React 组件需要在挂载完成、更新完成、卸载前执行某些操作
    - useEffect接受第一个参数是一个回调函数,当达到条件的时候,会触发当前的回调函数
    - useEffect接受第二个参数是一个数组
      - 数组中传入state,则当前state发生改变的时候触发当前effect中的回调函数
      - 如果传递的是一个空数组,则useEffct回调函数只有在初始化阶段才执行
      - 如果不传递第二个参数,则无论初始化还是更新的时候都会执行

    - useEffect的回调函数可以返回一个函数,当组件被卸载的时候,或再次渲染的时候,会执行这个函数,用来做收尾工作

    - useEffect可以根据逻辑书写多次
*/
export default function App() {
  // --------useState--------
  const [count, setCount] = useState(0)
  const [isHot, setIsHot] = useState(true)
  let [opacity,setOpacity] = useState(0)
  // ------useEffect-------
  //useEffect可以根据逻辑书写多次
  useEffect(()=>{
    //如果不传第二个参数 无论初始化或者页面更新都会执行
    //console.log('不传递参数初始化更新都执行test!');
    //如果第二个参数是一个空数组，只有初始化会执行
    //console.log('现在有第二个参数空数组执行！！！');
    //如果空数组传递了state那么则根据state的改变进行触发effect中的回调函数 数组中传入那个state的值，只有这个值发生改变 回调函数才会执行
    //console.log('现在数组中传递了state!');

    return ()=>{
      //useEffect的回调函数可以返回一个函数,当组件被卸载的时候，或者再次渲染的时候，会执行这个函数，用来收尾工作
      console.log('狗头增加'+count);
    }

  },[count,])


  //初始化时上个定时器
  useEffect(()=>{
    const Dogtimmer = setInterval(()=>{
      opacity -=0.1
      if(opacity<=0){
        opacity=1
      }
      setOpacity(opacity)
    },300)
    return ()=>{
      clearInterval(Dogtimmer)
    }
  },[])
  

  //事件
  const changeSetcount = () => {
    setCount(count + 1)
  }
  const changeWeight = () => {
    setIsHot(!isHot)
  }
  //console.log('渲染了！！！！！');
  return (
    <div>
      {/* --------useState-------- */}
      <p>狗头+{count}</p>
      <button onClick={changeSetcount}>点击🐕头</button>
      <p>今天天气{isHot ? '好热' : '真的好热'}</p>
      <button onClick={changeWeight}>改变天气</button>


      {/* ------useEffect------- */}
      <p style={{opacity}}>狗头渐变！！！！！！！！！！！</p>
    </div>
  )
}




